<script setup lang="ts"></script>

<template>
  <div class="app grid">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox"></label>
    <div class="content">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app {
  margin: 20px;
  border: 1px solid #ccc;
  line-height: 38px;

  // 隐藏input, 只是使用它的状态不需要显示出来
  input {
    position: absolute;
    top: -1000px;
  }

  label {
    cursor: pointer;
    margin-left: 15px;

    // 增加一个提示文字, 标识现在是展开还是收起
    &::before {
      content: '收起';
    }

    // 实现一个小剪头, 同样标识展开/收起状态
    &::after {
      $size: 10px;
      content: '';
      display: inline-block;
      border: $size solid transparent;
      border-top-color: #4c84ff;
      transform: rotate(180deg);
      position: relative;
      top: $size;
      transform-origin: 50% 25%;
      transition: all 0.3s;
      margin-left: $size;
    }
  }

  .content {
    overflow: hidden; // content 不占位时, 子元素也不显示
    transition: all 1s; // 指定怎样过渡, 在后边才会用到

    // 一些显示效果, 可不用太关心
    li {
      border: 1px solid #ccc;
      margin: -1px;
      margin-top: 0;
      padding: 0 30px;
    }
  }

  // 使用 checked 伪类, 在 checkbox 选中时, 应用下面的样式
  input:checked {
    & ~ label {
      &::before {
        content: '展开';
      }

      &::after {
        transform: rotate(0deg);
      }
    }
  }
}

.grid {
  .content {
    display: grid;
    grid-template-rows: 1fr;
  }

  ul {
    min-height: 0;
  }

  input:checked ~ .content {
    grid-template-rows: 0fr;
  }
}
</style>
